@import "~styles/themes/default";
@import "~styles/core/index";
@import "~styles/mods/index";

.text-success, 
.text-warning, 
.text-info, 
.text-danger {
	i, .fa {
		color:inherit;
	}
}

textarea {
	resize:none;
}

.score(@color: #FFFFFF) {
	display:inline-block;
	margin-left:12px;
	font-style:normal;
	line-height:normal;
	vertical-align:middle;
	color:@color;
	&:before {
		content:'';
		display:inline-block;
		width:1px;
		height:12px;
		margin-right:10px;
		background-color:@color;
	}
}
.ui-error {
	border:1px solid #EC5757;
	border-radius:3px;
	background-color:#FFFFFF;
	box-shadow:0 0 3px rgba(0, 0, 0, .1);
	h2 {
		height:36px;
		font-size:14px;
		line-height:36px;
		padding:0 20px;
		color:#FFFFFF;
		background-color:#EE7777;
		em {
			.score;
		}
	}
	&-panel {
		position:relative;
		padding:20px;
		
		h5, p {
			margin-bottom:5px;
		}
		h5 {
			margin-bottom:10px;
			font-size:16px;
			font-weight:bold;
		}
	}
	&-panel &-toolbar {
		position:absolute;
		top:50%;
		right:20px;
		margin-top:-16px;
		.x-btn {
			margin:0 5px;
		}
	}
	&-date {
		font-family:verdana;
		color:#999999;
	}
	+ .ui-grid-group {
		margin-top:20px;
	}
}
.ui-grid-group {
	.ui-header {
		.x-title {
			font-size:16px;
			i, .fa {
				vertical-align:inherit;
			}
			em {
				.score(#B7B7B7);
			}
		}
	}
	.ui-grid {
		min-height:120px;
		margin-top:20px;
		.ui-grid-item {
			height:300px;
			background-color:#FFFFFF;
			&:hover {
				box-shadow:0 0 10px rgba(215, 91, 93, .7);
				box-shadow:none !important;
				.ui-grid-item-detail {
					display:block;
					h4 {
						margin-top:-3px;
						font-size:16px;
						font-weight:400;
						color:#D75B5D;
					}
				}
			}
			.ui-grid-item-detail {
				display:none;
				position:absolute;
				top:0;
				left:0;
				z-index:100;
				width:320px;
				height:360px;
				padding:20px;
				border-radius:3px;
				background-color:#FFFFFF;
				box-shadow:0 0 10px rgba(215, 91, 93, .7);
			}
		}
		&.color-success {
			.ui-grid-item {
				border:1px dotted #4CAE00;
				background-color:#F6FFED;
				&:hover {
					.ui-grid-item-detail {
						box-shadow:0 0 10px rgba(82, 196, 26, .7);
					}
				}
			}
		}
		&.color-danger {
			.ui-grid-item {
				border:1px dotted #CB0A00;
				background-color:#FFECE9;
				&:hover {
					.ui-grid-item-detail {
						box-shadow:0 0 10px rgba(215, 91, 93, .7);
					}
				}
			}
		}
		&.color-info {
			.ui-grid-item {
				border:1px dotted #008EE6;
				background-color:#F6FCFF;
				&:hover {
					.ui-grid-item-detail {
						box-shadow:0 0 10px rgba(24, 144, 255, .7);
					}
				}
			}
		}
		&.color-warning {
			.ui-grid-item {
				border:1px dotted #D3A200;
				background-color:#FFF9D8;
				&:hover {
					.ui-grid-item-detail {
						box-shadow:0 0 10px rgba(250, 173, 20, .7);
					}
				}
			}
		}
		.ui-item-add {
			display:table;
			padding:0 50px;
			border-color:#989898 !important;
			background-color:#F5F5F5 !important;
			background-image:-webkit-gradient(linear, 0 100%, 100% 0,
								color-stop(.25, rgba(255, 255, 255, 1)), color-stop(.25, transparent),
								color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, 1)),
								color-stop(.75, rgba(255, 255, 255, 1)), color-stop(.75, transparent),
								to(transparent));
			background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 1) 25%, transparent 25%,
								transparent 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 75%,
								transparent 75%, transparent);
			background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, 1) 25%, transparent 25%,
								transparent 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 75%,
								transparent 75%, transparent);
			background-image:linear-gradient(45deg, rgba(255, 255, 255, 1) 25%, transparent 25%,
								transparent 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 75%,
								transparent 75%, transparent);
			background-size:50px 50px;

			&:hover .btn-add {
				color:#FFFFFF;
				background:#D75B5D;
			}
		}
		.ui-item-add-toolbar {
			display:table-cell;
			vertical-align:middle;
		}
		.btn-add {
			width:100%;
			padding:8px 12px;
			border:1px solid #D75B5D;
			border-radius:30px;
			color:#D75B5D;
			outline:none;
			background:#FFFFFF;
			box-shadow:0 0 5px rgba(0, 0, 0, .1);
			cursor:pointer;
		}
		.ui-item-state {
			margin-top:20px;
			padding:12px 0;
			border-width:1px 0;
			border-style:dotted;
			border-color:#E5E5E5;
			font-size:16px;
			font-weight:bold;
			text-align:center;
		}
		.data-task {
			font-size:16px;
			li {
				margin:5px 0;
			}
			.fa {
				width:48px;
				height:48px;
				margin-right:5px;
				border:1px solid #E8E8E8;
				border-radius:100%;
				line-height:48px;
				text-align:center;
				color:#1E7E3B;
				background-color:#FAFAFA;
			}
		}
		.x-grid-tips {
			// position:static;
			// margin-top:0;
		}
	}
}

// .slide-dialog {
// 	& &-header {
// 		background-color:#EFEFEF;
// 		background:-webkit-linear-gradient(top,#F9F9F9 0,#EFEFEF 100%);
// 		background:-moz-linear-gradient(top,#F9F9F9 0,#EFEFEF 100%);
// 		background:-o-linear-gradient(top,#F9F9F9 0,#EFEFEF 100%);
// 		background:linear-gradient(to bottom,#F9F9F9 0,#EFEFEF 100%);
// 		background-repeat:repeat-x;
// 		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#F9F9F9,endColorstr=#EFEFEF,GradientType=0);
// 	}
// }
.slide-dialog-title {
	float:left;
	h2, .slide-dialog-tools {
		display:inline-block;
		vertical-align:middle;
		line-height:34px;
	}
	h2 {
		font-size:16px;
		text-overflow:ellipsis;
		overflow:hidden;
		white-space:nowrap;
		color:#ACABA7;
	}
	h2 + .slide-dialog-tools {
		margin-left:12px;
	}
	.slide-dialog-tools {
		.button {
			cursor:pointer;
			&.active, &:hover {
				color:#D75B5D;
			}
		}
	}
}
.dialog-button {
	&.color-success {
		background-color:#5CB76F;
		&:hover {
			background-color:#359C03;
		}
	}
	&.color-info {
		background-color:#6098CC;
		&:hover {
			background-color:#1584EA;
		}
	}
	&.color-warning {
		background-color:#E4B24F;
		&:hover {
			background-color:#FAAD14;
		}
	}
}
.ui-grid {
	&.ui-grid-mini .ui-grid-item {
		width:180px;
		height:150px;
		background-color:#FFFFFF;
		> h4 {
			font-size:14px;
		}
		.ui-item-ico {
			height:36px;
			margin-top:24px;
			font-size:42px;
			line-height:36px;
		}
		.ui-item-text {
			font-size:12px;
		}
	}
}
.data-step {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	@fixed-height:102px;
	@fixed-padding:20px;
	.step-header {
		position:absolute;
		top:0;
		left:0;
		right:0;
		display:block;
		width:auto;
		height:@fixed-height;
		padding:20px 0;
		border-bottom:1px dotted #E7E7EB;

		&-view {
			display:table;
			width:100%;
			table-layout:fixed;
		}

		.step-node {
			margin-top:20px;
			padding-top:42px;
			cursor:pointer;

			&:before {
				height:3px;
			}
			&:after {
				font-size:14px;
				font-family:verdana;
			}

			&:first-child, &:last-child {
				&:before {
					width:50%;
				}
			}
			&:first-child:before {
				right:0;
			}
		}
	}
	.step-body {
		position:absolute;
		top:@fixed-height;
		left:0;
		right:0;
		bottom:0;
		margin-top:0;
		padding:@fixed-padding @fixed-padding 0;
    	overflow:auto;
    	&:after {
			content:'';
			display:block;
			height:0;
			margin-top:@fixed-padding;
    	}
	}
}

.x-field-group {
	position:relative;
	padding:0;

	&:before {
		position:absolute;
		top:-10px;
		left:50px;
		content:'';
		display:block;
		border-left:8px solid transparent;
	    border-right:8px solid transparent;
	    border-bottom:10px solid #CDCDCD;
	}
	.x-field {
		border:none;
		border-radius:0;
		border-top:1px dotted #CDCDCD;
		box-shadow:none;
		.x-field-header {
			display:none;
		}
		.x-field-body {
			border-radius:0;
			background-color:#F2FFF8;
		}
	}
}
.x-field-set {
	.x-field {
		border:2px dotted #B3B9C3;
		background-color:#FFFFFF;
		box-shadow:none;
		.x-field-header {
			margin-top:12px;
			height:auto;
			padding:0 12px;
		}
		.x-field {
			background-color:#B3B9C3;
			background-color:#D7E1F1;	
			box-shadow:2px 2px 10px rgba(0, 0, 0, 0.1);
			.x-field-header {
				margin-top:0;
				// background-color:#EFEFEF;
				// background:-webkit-linear-gradient(top,#F9F9F9 0,#EFEFEF 100%);
				// background:-moz-linear-gradient(top,#F9F9F9 0,#EFEFEF 100%);
				// background:-o-linear-gradient(top,#F9F9F9 0,#EFEFEF 100%);
				// background:linear-gradient(to bottom,#F9F9F9 0,#EFEFEF 100%);
				// background-repeat:repeat-x;
			}
		}
	}
}

.data-toggle {
	height:24px;
	margin-top:0;
}

select {
	border-radius:3px;
}

.x-toolbar {
	h3 {
		padding-bottom:12px;
		font-size:14px;
		border-bottom:1px dotted #CDCDCD;
	}

	.x-ipt {
		border:none;
		border-bottom:1px solid #CCCCCC;
		border-radius:0;
		box-shadow:none;
		background:none;
		&:focus {
    		border-color:#66AFE9;
			outline:0;
			box-shadow:none;
		}
	}
}

.x-steps {
	position:fixed;
	top:68px;
	right:20px;
	z-index:1000;
	padding:15px 20px;
	border:1px solid #EAEAEA;
	border-radius:5px;
	box-shadow:-1px 1px 10px rgba(0, 0, 0, .1);
	background-color:rgba(255, 255, 255, 1);
	cursor:pointer;

	.x-step {
		padding:5px;
		border-bottom:1px dotted #CDCDCD;
		&:last-child {
			border-bottom:none;
		}

		&:before {
			margin-right:5px;
			.iconfont('\f276');
			color:#D75B5D;
		}
		&.active {
			color:#D75B5D;
		}
	}
}

.x-group {
	margin-top:20px;

	&:first-child {
		margin-top:0;
	}

	.data-form {
		.x-ipt {
			border:none;
			border-bottom:1px solid #CCCCCC;
			border-radius:0;
			box-shadow:none;
			background:none;
			&:focus {
	    		border-color:#66AFE9;
				outline:0;
				box-shadow:none;
			}
		}
		.x-data-types {
			margin-top:-10px;
		}
		span.x-data-types {
			display:inline-block;
		}
	}
	.x-data-types {
		margin:0 0 0 -10px;
		.x-data-add,
		.x-data-type {
			margin:10px 0 0 10px;
			padding:7px 15px;
			border:1px dotted #CDCDCD;
			line-height:normal;
		}
		@active-color:#1C4290;
		.x-data-type {
			min-height:0;
			background:none;

			em {
				display:inline-block;
				margin-right:5px;
				padding:1px 3px;
				font-style:normal;
				font-size:10px;
				border-radius:2px;
				line-height:normal;
				text-align:center;
				box-shadow:0 1px 2px rgba(10, 16, 20, .24);
				color:#FFFFFF;
				background-color:#FAAD14;
			}

			&.type-1 {
				em {
					background-color:#F5222D;
				}
			}
			&.type-2 {
				em {
					background-color:#FAAD14;
				}
			}
			&.type-3 {
				em {
					background-color:#52C41A;
				}
			}
			&.type-4 {
				em {
					background-color:#1890FF;
				}
			}
			&:hover {
				background-color:@active-color;
				box-shadow:0 0 10px rgba(215, 91, 93, .3);
			}
			&.active {
				color:@active-color;
				box-shadow:0 0 10px rgba(215, 91, 93, .3);
				background:none;
				&:before {
					position:absolute;
					top:-6px;
					right:-6px;
					.iconfont('\f058');
					color:@active-color;
				}
			}
		}
		.x-data-add {
			display:inline-block;
			font-size:14px;
			border-radius:3px;
			color:@active-color;
			// background-color:@active-color;
			border-color:@active-color;
			outline:none;
			background:#FFFFFF;
			cursor:pointer;
			&[disabled] {
				color:#CDCDCD;
				border-color:#CDCDCD;
				background:#E8E8E8;
				cursor:default;
			}
		}
		.x-error {
			font-size:14px;
		}
		span.x-error {
			margin-left:10px;
		}
	}
	&-header {
		margin-bottom:12px;
		padding:0 12px;
		border-left:2px solid #D75B5D;
		border-radius:3px;
		color:#D75B5D;
		background-color:#F8F9FA;
		h3 {
			font-size:14px;
			line-height:32px;
		}
	}
	&-body {

	}
	.data-tabs {
		margin-top:20px;
		.data-tab-nav {
			li {
				position:relative;
				height:30px;
				vertical-align:top;
				.fa {
					position:absolute;
					top:-5px;
					right:12px;
					z-index:1;
					border-radius:100%;
					color:#D75B5D;
					background-color:#FFFFFF;
					cursor:pointer;
				}
				em {
					max-width:180px;
				}
				&.tab-nav-add {
					min-width:0;
					margin-left:-10px;
					padding-top:3px;
					color:#5CB76F;
					&:before, &:after {
						display:none;
					}
					.fa {
						position:static;
						margin-right:5px;
						color:inherit;
					}
				}
			}
		}
	}
	
	.x-grid-header {
		background:#EFEFEF;
	}
	.x-grid-wrap {
		// min-height:210px;
		tr:last-child {
			td {
				border-bottom:1px solid #DBDBDB;
			}
		}
		td {
			vertical-align:middle;
			&.x-grid-group td {
				border-bottom:none;
			}
		}
	}
	.x-grid-auto .x-grid-wrap tr:last-child td {
		border-bottom:none;
	}
	.x-grid-toolbar {
		margin-bottom:12px;
		padding-bottom:3px;
		border-bottom:1px solid #D2D2D2;
		.clearfix;
		h4 {
			float:left;
			font-size:14px;
			line-height:32px;
		}
		.x-grid-tools {
			float:right;
			select {
				padding:1px 2px;
			}
		}
	}
	.x-grid-toolbar-fixed {
		position:absolute;
		top:5px;
		right:7px;
		z-index:10;
	}
	.x-grid-arrow {
		position:relative;
		.x-grid-inner {
			position:absolute;
			top:-16px;
			left:50%;
			margin-left:-36px;
			text-align:center;
			select {
				width:72px;
				height:32px;
			}
		}
	}
	.x-grid .x-grid-wrap td.x-grid-arrow {
		border-bottom:1px solid #FFFFFF !important;
	}
}
.x-data-panel-fixed .x-grid-fixed {
	&.x-grid-fill {
		bottom:180px;
	}
	+ .form-fixed {
		position:absolute;
		left:20px;
		right:20px;
		bottom:20px;

		textarea {
			height:120px;
		}
	}
}

.form-delimiter {
	position:relative;
	height:12px;
	margin:8px 0;
	border-bottom:1px dotted #E2E2E2;
	text-align:center;
	em {
		font-style:normal;
		font-size:12px;
		color:#D75B5D;
		cursor:pointer;
	}
	.delimiter-arrow {
		position:absolute;
		top:50%;
		right:0;
		width:20px;
		height:20px;
		margin-top:-6px;
		border-radius:100%;
		border:1px solid #D3D3D3;
		text-align:center;
		line-height:20px;
		background-color:#EFEFEF;
		background:-webkit-linear-gradient(top,#F9F9F9 0,#EFEFEF 100%);
		background:-moz-linear-gradient(top,#F9F9F9 0,#EFEFEF 100%);
		background:-o-linear-gradient(top,#F9F9F9 0,#EFEFEF 100%);
		background:linear-gradient(to bottom,#F9F9F9 0,#EFEFEF 100%);
		background-repeat:repeat-x;
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#F9F9F9,endColorstr=#EFEFEF,GradientType=0);
		overflow:hidden;
		vertical-align:top;
		cursor:pointer;
		&:before {
			.iconfont('\f107');
		}
	}
	&.active .delimiter-arrow {
		&:before {
			.iconfont('\f106');
		}
	}
}
.data-flex {
	margin-top:20px;
	table td {
		text-align:center;
		vertical-align:middle;
	}
	.flex-box {
		position:relative;
		&:before {
			position:absolute;
			top:50%;
			z-index:-1;
			content:'';
			display:block;
			width:100%;
			height:2px;
			margin-top:-1px;
			border-radius:5px;
			background-color:#D3D3D3;
		}
		.fa {
			display:inline-block;
			border-radius:100%;
			font-size:32px;
			color:#DBDBDB;
			background-color:#FFFFFF;
		}
	}
	.flex-button {
		display:inline-block;
		border:none;
		outline:none;
		background:none;
		user-select:none;
		cursor:pointer;
		&:hover, &.active {
			.fa {
				color:#1c4290;
			}
		}
		.fa {
			font-size:72px;
			color:#E5E5E5;
		}
		em {
			display:block;
			margin-top:12px;
			font-style:normal;
			white-space:nowrap;
			max-width:320px;
			text-overflow:ellipsis;
			overflow:hidden;
		}
	}
	.flex-toolbar {
		position:relative;
		display:inline-block;
		.flex-button {
			
		}
		.flex-ico-button {
			position:absolute;
			top:-3px;
			left:50%;
			margin-left:24px;
			border:none;
			white-space:nowrap;
			outline:none;
			color:#5CB76F;
			background:none;

			.fa {
				width:16px;
				margin-right:3px;
				border-radius:100%;
				background-color:#FFFFFF;
			}
		}
	}
}

.field-primary {
	height:42px;
	margin:-8px -5px;
	line-height:42px;
	cursor:pointer;
}

.data-area {
	padding:12px 0;
	
	.form-title {
		h2 {
			font-size:14px;
			color:#D75B5D;
			&:before {
				margin-right:5px;
				.iconfont('\f0ec');
			}
		}
		p {
			margin-top:3px;
			font-size:13px;
			color:#999999;
		}
	}
	> .form-title {
		margin-top:12px;
	}
	h3 {
		margin-bottom:20px;
		padding-bottom:12px;
		font-size:14px;
		border-bottom:1px dotted #CDCDCD;
	}
}